<script>
export default {
  name: "UserMaintenance",
  data(){
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formInline: {},
      form: {},
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ],
      columns:[
        {
          title: '登录名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '姓名',
          dataIndex: 'nickname',
          key: 'nickname',
        },
        {
          title: '头像',
          dataIndex: 'image',
          key: 'image',
        },
        {
          title: '手机',
          dataIndex: 'phone',
          key: 'phone',
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          key: 'email',
        },
        {
          title: '状态',
          key: 'tags',
          dataIndex: 'tags',
          scopedSlots: { customRender: 'tags' },
        },
        {
          title: '操作',
          key: 'opt',
          scopedSlots: { customRender: 'opt' },
        },
      ],
      pageSize: 20,
      current: 4,
      visible: false,
      modalTitle: "",
    }
  },
  watch: {
    pageSize(val) {
      console.log('pageSize', val);
    },
    current(val) {
      console.log('current', val);
    },
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    },
    handleSubmit() {
      // this.visible = true;
    },
    updateUser(type, data = null) {
      this.visible = true;
      // 新增
      if (type == 'add') {
        this.modalTitle = "新增用户"
      } else {
        // 修改
        console.log(data)
        this.modalTitle = "修改用户"
      }
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    resetPwd() {

      this.$confirm({
        title: '提示',
        content: '是否重置当前用户密码?',
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    delUser() {

      this.$confirm({
        title: '提示',
        content: '是否确定删除当前用户?',
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
  },
}
</script>

<template>
<div>
  <a-form-model layout="inline" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
    <a-form-model-item>
      <a-input v-model="formInline.user" placeholder="登录名">
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-input v-model="formInline.phone" placeholder="手机">
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-button type="primary" > 查 询 </a-button>
    </a-form-model-item>
    <a-form-model-item>
      <a-button type="danger" @click="updateUser('add')"> 新 增 </a-button>
    </a-form-model-item>
  </a-form-model>

  <a-table :columns="columns" :data-source="data" bordered class="mt-10" :pagination="false">
    <a slot="name" slot-scope="text">{{ text }}1</a>
    <span slot="tags" slot-scope="tags">
      <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
    <span slot="opt" slot-scope="text, record">
      <a-button title="修 改" type="primary" shape="circle" icon="edit"  @click="updateUser('edit', record)"/>
      <a-button title="重置密码" shape="circle" icon="unlock" @click="resetPwd"/>
      <a-button title="删 除" type="danger" shape="circle" icon="delete"  @click="delUser"/>
    </span>
  </a-table>
  <a-pagination
      class="mh-10 mt-10"
      v-model="current"
      show-size-changer
      :page-size.sync="pageSize"
      :total="500"
      @showSizeChange="onShowSizeChange"
  />

<!--  修改用户信息 -->
  <a-modal v-model="visible" :title="modalTitle" @ok="handleOk">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="登录名">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="姓名">
        <a-input v-model="form.nickname" />
      </a-form-model-item>
      <a-form-model-item label="头像">
        <a-input v-model="form.image" />
      </a-form-model-item>
      <a-form-model-item label="手机">
        <a-input v-model="form.phone" />
      </a-form-model-item>
      <a-form-model-item label="性别">
        <a-radio-group v-model="form.isVisible">
          <a-radio value="1">
            男
          </a-radio>
          <a-radio value="0">
            女
          </a-radio>
          <a-radio value="-1">
            保密
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="邮箱">
        <a-input v-model="form.email" />
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-input v-model="form.tags" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>

</div>
</template>

<style scoped lang="less">

</style>